<!DOCTYPE html>
<html lang="zh-Hans">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>fallen-ui</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --button-height: 32px;
      --font-size: 14px;
      --button-bg: white;
      --button-active-bg: #eee;
      --border-radius: 4px;
      --color: #333;
      --border-color: #999;
      --border-color-hover: #666;
    }

    #app {
      /* margin: 20px; */
    }

    body {
      font-size: var(--font-size);
    }
  </style>
  <style>
    .box {
      margin: 20px;
    }

    .demo {
      background: #ddd;
      border: 1px solid #666;
      min-height: 100px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div style="padding: 100px;">
      <f-collapse :selected.sync="selectedTab" single>
        <f-collapse-item title="标题1" name="1">
          与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；<br>
          在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
        </f-collapse-item>
        <f-collapse-item title="标题2" name="2">
          与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；<br>
          在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
        </f-collapse-item>
        <f-collapse-item title="标题3" name="3">
          与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；<br>
          在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
        </f-collapse-item>
      </f-collapse>
    </div>
    <div style="padding: 20px;">
      <f-popover position="bottom">
        <template slot="content" slot-scope="{close}">
          <div>popover内容 <a href="https://www.baidu.com/">qq</a></div>
          <f-button @click="close">关闭</f-button>
        </template>
        <f-button>按钮</f-button>
      </f-popover>
      <f-popover position="left">
        <template slot="content">
          <div>popover内容</div>
        </template>
        <f-button>按钮</f-button>
      </f-popover>
      <f-popover position="right">
        <template slot="content">
          <div>popover内容</div>

        </template>
        <f-button>按钮</f-button>
      </f-popover>
      <f-popover>
        <template slot="content">
          <div>popover内容</div>
        </template>
        <f-button>按钮</f-button>
      </f-popover>
    </div>
    <div style="padding: 20px;">
      <f-popover position="bottom" trigger="hover">
        <template slot="content">
          <div>popover内容</div>
        </template>
        <f-button>按钮</f-button>
      </f-popover>
      <f-popover position="left" trigger="hover">
        <template slot="content">
          <div>popover内容</div>
        </template>
        <f-button>按钮</f-button>
      </f-popover>
      <f-popover position="right" trigger="hover">
        <template slot="content">
          <div>popover内容</div>
        </template>
        <f-button>按钮</f-button>
      </f-popover>
      <f-popover trigger="hover">
        <template slot="content">
          <div>popover内容</div>
        </template>
        <f-button>按钮</f-button>
      </f-popover>
    </div>
    <!-- <f-tabs selected="selectedTab" @update:selected="selectedTab = $event"> -->
    <!-- <f-tabs :selected.sync="selectedTab">
      <f-tabs-header>
        <template slot="actions">
          <button>设置</button>
        </template>
        <f-tabs-item name="woman">
          <f-icon name="settings"></f-icon>
          美女
        </f-tabs-item>
        <f-tabs-item name="finance" disabled>财经</f-tabs-item>
        <f-tabs-item name="sports">体育</f-tabs-item>
      </f-tabs-header>
      <f-tabs-body>
        <f-tabs-pane name="woman">美女相关</f-tabs-pane>
        <f-tabs-pane name="finance">财经相关</f-tabs-pane>
        <f-tabs-pane name="sports">体育相关</f-tabs-pane>
      </f-tabs-body>
    </f-tabs> -->

    <button @click="showToast">按钮</button>
    <f-layout style="height: 100vh;">
      <f-sider class="demo">sider</f-sider>
      <f-layout>
        <f-header class="demo">header</f-header>
        <f-content class="demo">content</f-content>
        <f-footer class="demo">footer</f-footer>
      </f-layout>
    </f-layout>
    <f-row>
      <f-col span="24" :ipad="{span:12}" :narrow-pc="{span:8}">
        <div class="demo"></div>
      </f-col>
      <f-col span="24" :ipad="{span:12}" :narrow-pc="{span:8}">
        <div class="demo"></div>
      </f-col>
      <f-col span="24" :ipad="{span:12}" :narrow-pc="{span:8}">
        <div class="demo"></div>
      </f-col>
      <f-col span="24" :ipad="{span:12}" :narrow-pc="{span:8}">
        <div class="demo"></div>
      </f-col>
      <f-col span="24" :ipad="{span:12}" :narrow-pc="{span:8}">
        <div class="demo"></div>
      </f-col>
      <f-col span="24" :ipad="{span:12}" :narrow-pc="{span:8}">
        <div class="demo"></div>
      </f-col>
    </f-row>

    <div class="box">
      <f-input value="魔丸" readonly></f-input>
      <f-input value="哈哈" disabled></f-input>
      <f-input v-model="message"></f-input>
    </div>
    <div class="box">
      <f-input value="嘿" error="姓名不能少于两个字"></f-input>
    </div>
    <div class="box">
      <f-button :loading="loading1" @click="loading1 = !loading1">按钮</f-button>
      <f-button icon="settings" :loading="loading2" @click="loading2 = !loading2">按钮</f-button>
      <f-button icon="download" icon-position="right" :loading="loading3" @click="loading3 = !loading3">按钮</f-button>
      <f-button-group>
        <f-button icon="left">上一页</f-button>
        <f-button>更多</f-button>
        <f-button icon="right" icon-position="right">下一页</f-button>
      </f-button-group>
    </div>
  </div>

  <script src="./src/app.js"></script>
  <script>

  </script>
</body>

</html>